<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3商城</title>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入图标 -->
  <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
  <!-- 引入Vue3和Element Plus -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 15px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      font-size: 24px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .logo i {
      margin-right: 8px;
      font-size: 28px;
    }
    .search-bar {
      flex: 1;
      max-width: 500px;
      margin: 0 20px;
    }
    .user-actions {
      display: flex;
      align-items: center;
    }
    .cart-badge {
      position: relative;
      margin-right: 20px;
    }
    .cart-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #f56c6c;
      color: white;
      border-radius: 10px;
      padding: 0 6px;
      font-size: 12px;
      line-height: 18px;
    }
    .main-content {
      display: flex;
      margin-top: 20px;
      gap: 20px;
    }
    .sidebar {
      width: 250px;
      background: white;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    .products {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }
    .product-card {
      background: white;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .product-info {
      padding: 15px;
    }
    .product-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .product-price {
      color: #f56c6c;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .footer {
      margin-top: 40px;
      background: #2c3e50;
      color: white;
      padding: 30px 0;
      text-align: center;
    }
    .cart-drawer {
      padding: 20px;
    }
    .cart-item {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #ebeef5;
    }
    .cart-item-image {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
    }
    .cart-item-info {
      flex: 1;
      margin-left: 15px;
    }
    .cart-item-title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .cart-item-price {
      color: #f56c6c;
    }
    .cart-item-actions {
      display: flex;
      align-items: center;
    }
    .cart-total {
      padding: 15px 0;
      border-top: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: bold;
    }
    .empty-cart {
      text-align: center;
      padding: 40px 0;
      color: #909399;
    }
    .empty-cart i {
      font-size: 60px;
      margin-bottom: 15px;
    }
    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
      .sidebar {
        width: 100%;
      }
      .products {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      }
      .header-content {
        flex-wrap: wrap;
      }
      .search-bar {
        order: 3;
        max-width: 100%;
        margin: 10px 0 0;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 顶部导航 -->
  <div class="header">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <i class="el-icon-shopping-bag-1"></i>
          Vue商城
        </div>
        <div class="search-bar">
          <el-input
              v-model="searchQuery"
              placeholder="搜索商品..."
              :prefix-icon="Search"
              clearable
          ></el-input>
        </div>
        <div class="user-actions">
          <div class="cart-badge">
            <el-button :icon="ShoppingCart" @click="cartDrawer = true">
              购物车
            </el-button>
            <span v-if="cartItems.length > 0" class="cart-count">{{ cartTotalQuantity }}</span>
          </div>
          <el-button type="primary" :icon="User">登录</el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 主要内容 -->
  <div class="container">
    <div class="main-content">
      <!-- 侧边栏筛选 -->
      <div class="sidebar">
        <h3>商品分类</h3>
        <el-tree
            :data="categories"
            :props="defaultProps"
            default-expand-all
            @node-click="handleCategoryClick"
        ></el-tree>

        <h3 style="margin-top: 20px;">价格筛选</h3>
        <el-slider
            v-model="priceRange"
            range
            :max="5000"
            :step="100"
            @change="handlePriceFilter"
        ></el-slider>
        <div style="display: flex; justify-content: space-between; margin-top: 10px;">
          <span>¥{{ priceRange[0] }}</span>
          <span>¥{{ priceRange[1] }}</span>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="products">
        <div
            v-for="product in filteredProducts"
            :key="product.id"
            class="product-card"
        >
          <img :src="product.image" :alt="product.name" class="product-image">
          <div class="product-info">
            <div class="product-title">{{ product.name }}</div>
            <div class="product-price">¥{{ product.price }}</div>
            <el-button
                type="primary"
                :icon="Plus"
                @click="addToCart(product)"
                style="width: 100%;"
            >
              加入购物车
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 购物车抽屉 -->
  <el-drawer
      v-model="cartDrawer"
      title="购物车"
      direction="rtl"
      size="350"
  >
    <div class="cart-drawer">
      <div v-if="cartItems.length > 0">
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <img :src="item.image" :alt="item.name" class="cart-item-image">
          <div class="cart-item-info">
            <div class="cart-item-title">{{ item.name }}</div>
            <div class="cart-item-price">¥{{ item.price }}</div>
          </div>
          <div class="cart-item-actions">
            <el-button
                :icon="Minus"
                circle
                size="small"
                @click="decreaseQuantity(item)"
            ></el-button>
            <span style="margin: 0 10px;">{{ item.quantity }}</span>
            <el-button
                :icon="Plus"
                circle
                size="small"
                @click="increaseQuantity(item)"
            ></el-button>
            <el-button
                :icon="Delete"
                type="danger"
                circle
                size="small"
                style="margin-left: 10px;"
                @click="removeFromCart(item)"
            ></el-button>
          </div>
        </div>
        <div class="cart-total">
          <span>总计:</span>
          <span>¥{{ cartTotalPrice }}</span>
        </div>
        <el-button type="primary" style="width: 100%; margin-top: 20px;">
          去结算
        </el-button>
      </div>
      <div v-else class="empty-cart">
        <i class="el-icon-shopping-cart-2"></i>
        <p>购物车为空</p>
      </div>
    </div>
  </el-drawer>

  <!-- 页脚 -->
  <div class="footer">
    <div class="container">
      <p>© 2023 Vue商城 版权所有</p>
      <p>联系电话: 400-123-4567 | 邮箱: service@vueshop.com</p>
    </div>
  </div>
</div>

<script>
  const { createApp, ref, computed } = Vue;
  const { ElMessage } = ElementPlus;

  // 图标引用
  const Search = 'Search';
  const ShoppingCart = 'ShoppingCart';
  const User = 'User';
  const Plus = 'Plus';
  const Minus = 'Minus';
  const Delete = 'Delete';

  createApp({
    setup() {
      // 搜索查询
      const searchQuery = ref('');

      // 价格范围
      const priceRange = ref([0, 5000]);

      // 购物车抽屉状态
      const cartDrawer = ref(false);

      // 商品数据
      const products = ref([
        { id: 1, name: '智能手机 Pro Max', price: 4999, category: 'electronics', image: 'https://via.placeholder.com/300x200?text=智能手机' },
        { id: 2, name: '轻薄笔记本电脑', price: 6899, category: 'electronics', image: 'https://via.placeholder.com/300x200?text=笔记本电脑' },
        { id: 3, name: '无线蓝牙耳机', price: 699, category: 'electronics', image: 'https://via.placeholder.com/300x200?text=蓝牙耳机' },
        { id: 4, name: '男士休闲衬衫', price: 299, category: 'clothing', image: 'https://via.placeholder.com/300x200?text=男士衬衫' },
        { id: 5, name: '女士连衣裙', price: 459, category: 'clothing', image: 'https://via.placeholder.com/300x200?text=连衣裙' },
        { id: 6, name: '运动跑鞋', price: 599, category: 'shoes', image: 'https://via.placeholder.com/300x200?text=运动鞋' },
        { id: 7, name: '时尚手表', price: 1299, category: 'accessories', image: 'https://via.placeholder.com/300x200?text=时尚手表' },
        { id: 8, name: '家用咖啡机', price: 899, category: 'home', image: 'https://via.placeholder.com/300x200?text=咖啡机' }
      ]);

      // 分类数据
      const categories = ref([
        {
          label: '电子产品',
          children: [
            { label: '手机' },
            { label: '电脑' },
            { label: '耳机' }
          ]
        },
        {
          label: '服装',
          children: [
            { label: '男装' },
            { label: '女装' }
          ]
        },
        {
          label: '鞋类',
          children: [
            { label: '运动鞋' },
            { label: '休闲鞋' }
          ]
        },
        {
          label: '配件',
          children: [
            { label: '手表' },
            { label: '眼镜' }
          ]
        },
        {
          label: '家居',
          children: [
            { label: '厨房电器' },
            { label: '生活用品' }
          ]
        }
      ]);

      const defaultProps = {
        children: 'children',
        label: 'label'
      };

      // 购物车数据
      const cartItems = ref([]);

      // 计算属性：过滤商品
      const filteredProducts = computed(() => {
        return products.value.filter(product => {
          const matchesSearch = product.name.toLowerCase().includes(searchQuery.value.toLowerCase());
          const matchesPrice = product.price >= priceRange.value[0] && product.price <= priceRange.value[1];
          return matchesSearch && matchesPrice;
        });
      });

      // 计算属性：购物车总数量
      const cartTotalQuantity = computed(() => {
        return cartItems.value.reduce((total, item) => total + item.quantity, 0);
      });

      // 计算属性：购物车总价格
      const cartTotalPrice = computed(() => {
        return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0);
      });

      // 方法：添加到购物车
      const addToCart = (product) => {
        const existingItem = cartItems.value.find(item => item.id === product.id);

        if (existingItem) {
          existingItem.quantity += 1;
        } else {
          cartItems.value.push({
            ...product,
            quantity: 1
          });
        }

        ElMessage.success(`已添加 ${product.name} 到购物车`);
      };

      // 方法：增加商品数量
      const increaseQuantity = (item) => {
        item.quantity += 1;
      };

      // 方法：减少商品数量
      const decreaseQuantity = (item) => {
        if (item.quantity > 1) {
          item.quantity -= 1;
        } else {
          removeFromCart(item);
        }
      };

      // 方法：从购物车移除商品
      const removeFromCart = (item) => {
        const index = cartItems.value.findIndex(cartItem => cartItem.id === item.id);
        if (index !== -1) {
          cartItems.value.splice(index, 1);
          ElMessage.info(`已从购物车移除 ${item.name}`);
        }
      };

      // 方法：处理分类点击
      const handleCategoryClick = (data) => {
        searchQuery.value = data.label;
      };

      // 方法：处理价格筛选
      const handlePriceFilter = () => {
        // 价格筛选逻辑已在计算属性中实现
      };

      return {
        searchQuery,
        priceRange,
        cartDrawer,
        products,
        categories,
        defaultProps,
        cartItems,
        filteredProducts,
        cartTotalQuantity,
        cartTotalPrice,
        addToCart,
        increaseQuantity,
        decreaseQuantity,
        removeFromCart,
        handleCategoryClick,
        handlePriceFilter,
        Search,
        ShoppingCart,
        User,
        Plus,
        Minus,
        Delete
      };
    }
  }).use(ElementPlus).mount('#app');
</script>
</body>
</html>